<style lang="less">
  @import './style.less';
  @import '//g.alicdn.com/sd/ncpc/nc.css?t=1513610172416';
</style> 

<template>
	<div class="container">
		<!-- 此段必须要引入 -->
 
<div id="_umfp" style="display:inline;width:1px;height:1px;overflow:hidden"></div>
 
<!-- 引入结束 -->
		<div class="xuniDuihuan">
			<div class="xuniDuihuanTittle">
				<p>视频会员卡</p>
				<h2>爱奇艺黄金会员（月卡）</h2>
			</div>
			<div class="xuniDuihuanForm">
				<Form :model="formTop" label-position="top">
					<FormItem>
						<Input v-model="value" placeholder="激活码正在获取中" icon="md-sync"  @on-click="reload"/>
					</FormItem>
					<!-- <div class="xuniDuiKmSx"><Button size="small" type="primary" @click="reload">刷新</Button></div> -->
				</Form>
			</div>
			<p class="xuniDuihuanTip">您的激活码正在获取中，请耐心等候，点击“刷新”可刷新激活码的获取状态</p>
			<p class="xuniDuihuanTip">复制激活码，点击下方“马上激活”，登录后将激活码张贴到对应位置即可<br>有效期至2019年9月1日</p>
			<div class="cont tc">
				<a href="#" @click="activation" class="guanzhu" style="margin-bottom:0.8rem;">马上激活</a>
				<a href="javascript:;" class="fanhui" @click="$router.push({name: 'index'})">返回活动首页</a>
			</div>
			<Modal v-model="modal1">
				<div class="pd25">
					<h2 class="tc" style="color:#000;padding-bottom:0.8rem">请先完成下方验证</h2>
					<div id="dom_id" class="group" ></div>
				</div>
			</Modal>


		</div>
	</div>

</template>

<script>
	import * as backApi from '@/api/play'
    export default {
        data () {
            return {
				modal1: false,
				formTop: {},
				value: ''
            }
		},
		created () {

			this.htRem();
			let _this 	= this;
			window.onresize = function() {
				_this.htRem();
			};

			//初始化页面
			_this.initActivity();
			//阿里云拖动验证
		},
		methods: {
			//初始化页面数据
			initActivity () {
				let queryData 	= {};
				// backApi.prize(queryData).then(res => {
				// 	if (res.data.code == 1) {
				// 		this.prizeArr 	= res.data.prizeArr;
				// 	} else {
				// 		$router.push({name: '500'})
				// 	}
				// });
			},
			htRem () {
				var clientWidth = document.documentElement.clientWidth;
				if (clientWidth > 750) {
					clientWidth = 750;
				}
				document.documentElement.style.fontSize = 20 * (clientWidth / 320) + 'px';   
			},
			reload () {
				console.log(111);
			},
			initCaptcha () {
				var nc = new noCaptcha();
				var nc_appkey = 'aaaa';  // 应用标识,不可更改 正式服务器的
				var nc_scene = 'login';  //场景,不可更改
				var nc_token = [nc_appkey, (new Date()).getTime(), Math.random()].join(':');
				var nc_option = {
					renderTo: '#dom_id',//渲染到该DOM ID指定的Div位置
					appkey: nc_appkey,
					scene: nc_scene,
					token: nc_token,
					callback: function (data) {// 校验成功回调
						csessionid = $.trim(data.csessionid);
						sig        = $.trim(data.sig);
						token      = nc_token;
						scene      = nc_scene;
					}
				};
				nc.init(nc_option);
			},
			activation () {
				this.initCaptcha();
				this.modal1 	= true;
			}
		}
    };
</script>
